$(function(){
  var _data = SETTING.STORES;
  var _curProvince = null;
  var _curCity = null;
  var _curStore = null;
  var ImgW = null;
  var ImgH = null;
  var _curDispImageIdx = 0;
  function _onSelChange(type,val){
    switch(type){
      case "province":
        if(_curProvince == val){
          return;
        }
        _curProvince = val;
        var cities = _.keys(_data[val]);
        buildSelBox("sel-c",".sel-box-2","city",cities);
        var stores = _.keys(_data[val][cities[0]]);
        buildSelBox("sel-s",".sel-box-3","store",stores);
        break;
      case "city":
        if(_curCity == val){
          return;
        }
        _curCity = val;
        var stores = _.keys(_data[_curProvince][_curCity]);
        buildSelBox("sel-s",".sel-box-3","store",stores);
        break;
      case "store":
        _curStore = val;
        buildStores();
        break;
    }
  }

  function buildStores(){
    var _stores = _data[_curProvince][_curCity][_curStore];
    var $el = $('#store .store-shows');
    $el.empty();
    var h =[];
    for(var i =0;i < _stores.length;i++){
      h.push("<div class='imgfill'>");
      h.push("<img src='",_stores[i],"'/>");
      h.push("</div>");
    }
    $el.html(h.join(''));
    $('#store .imgfill:first').addClass("active");
    $('#store .imgfill').height(global.H-100).width(global.W-100).imagefill();
    $el.fadeIn();
    $('#store .close-icon,#store .nav').show();
    _curDispImageIdx = 0;
  }

  function buildSelBox(name,key,type,data){
    var h = [];
    h.push("<select name='",name,"'>");
    for(var i = 0; i < data.length;i++){
      h.push("<option value = '",data[i],"'>");
      h.push(data[i]);
      h.push("</option>");
    }
    h.push("</select>");
    //$(key).empty();
    $(key).html(h.join(""));
    $(key+" select").selectbox({
      onChange:function(val,inst){
        var type = inst.settings.selType;
        _onSelChange(type,val);
      },
      selType:type
    });
  }

  
  var provins = _.keys(_data);
  _curProvince = provins[0];
  buildSelBox("sel-p",".sel-box-1","province",provins);
  var cities = _.keys(_data[provins[0]]);
  _curCity = cities[0];
  buildSelBox("sel-c",".sel-box-2","city",cities);
  var stores = _.keys(_data[provins[0]][cities[0]]);
  _curStore = stores[0];
  buildSelBox("sel-s",".sel-box-3","store",stores);

  function layout(){
    ImgW = global.W - 100;
    ImgH = global.H - 100;
    $('#store .store-shows').height(global.H-100).width(global.W-100);
    $('#store .imgfill').height(global.H-100).width(global.W-100).imagefill();
    $('#store .sel-outer').css('marginTop', (global.H/2-90)+'px');
  }

  $('#store .close-icon').click(function(){
    $('#store .store-shows').fadeOut();
    $('#store .close-icon,#store .nav').hide();
  });


  var motion = ["top","bottom","left","right"];
  var _curMotion = 0;

  function _moveMotion($target,motion){
    switch(motion){
      case "top":
        $target.css({
          left: 0,
          top:-ImgH
        }).addClass('moving');
        $target.animate({
          top: 0},function(){
            $('#store .imgfill.active').removeClass('active');
            $('#store .imgfill.moving').removeClass('moving').addClass('active');
          });
        break;
      case "bottom":
        $target.css({
          left: 0,
          top:ImgH
        }).addClass('moving');
        $target.animate({
          top: 0},function(){
            $('#store .imgfill.active').removeClass('active');
            $('#store .imgfill.moving').removeClass('moving').addClass('active');
          });
        break;
      case "left":
        $target.css({
          left: -ImgW,
          top:0
        }).addClass('moving');
        $target.animate({
          left: 0},function(){
            $('#store .imgfill.active').removeClass('active');
            $('#store .imgfill.moving').removeClass('moving').addClass('active');
          });
        break;
      case "right":
        $target.css({
          left: ImgW,
          top:0
        }).addClass('moving');
        $target.animate({
          left: 0},function(){
            $('#store .imgfill.active').removeClass('active');
            $('#store .imgfill.moving').removeClass('moving').addClass('active');
          });
        break;
    }
  }

  function _move(isForward){
    _curMotion = _curMotion%4;
    $('#store .imgfill.active')
    // get current active image index
    var index = $('#store .imgfill.active').index($('#store .imgfill'));
    isForward ? _curDispImageIdx++ : _curDispImageIdx--;

    var totalNum = $('#store .imgfill').length;
    if(_curDispImageIdx > totalNum-1){
      _curDispImageIdx = 0;
    }
    if(_curDispImageIdx < 0){
      _curDispImageIdx = totalNum-1;
    }
    var $target=$('#store .imgfill').eq(_curDispImageIdx);
     
    _moveMotion($target,motion[_curMotion]);
    _curMotion++;
  }

  $('#store .nav').click(function(){
    _move($(this).hasClass('next'));
  });

  layout();
  registerResize(layout);
});